<template>
  <div class="">
    <div style="width: 90%; margin: 0 auto; border-bottom: 1px solid #f5f5f5">
      <p
        style="
          font-weight: 400;
          font-size: 12px;
          color: #999999;
          margin-left: 15px;
          margin-top: 10px;
        "
      >
        支持jpg、png格式文件。
      </p>
      <van-uploader
        :upload-icon="uploadIcon"
        v-model="formData"
        :disabled="show"
        :before-read="individualbeforeRead"
        :after-read="recordApprovaAfterRead"
        :before-delete="recordApprovaUploadImg"
        style="margin-left: 15px; margin-top: 10px; margin-bottom: 20px"
      />
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import axios from "axios";
import { Toast } from "vant";
import { deleteImg } from "@/api/businessHandle/houseRepair";
export default {
  props: {
    fileList: {
      type: Array,
      default() {
        return [];
      },
    },
    fileId: {
      type: Number,
      default() {
        return null;
      },
    },
    docid: {
      type: Number,
      default() {
        return null;
      },
    },
    show: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  data() {
    return {
      uploadIcon: require("@/assets/icon/Group 1464.png"),
      formData: [],
      headers: {
        token: Cookies.get("token"),
      },
      id: null,
      userDocid: null,
      uploadUrl: this.$uploadedUrl,
    };
  },
  mounted() {},
  methods: {
    individualbeforeRead(file) {
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        Toast("请上传 jpg,png 格式图片");
        return false;
      }
      return true;
    },
    recordApprovaAfterRead(file) {
      if (file instanceof Array) {
        file.map((v) => {
          v.status = "uploading";
          v.message = "上传中...";
          this.recorUploadImg(v);
        });
      } else {
        file.status = "uploading";
        file.message = "上传中...";
        this.recorUploadImg(file);
      }
    },
    recorUploadImg(file) {
      console.log(file, "file");
      const formData = new FormData();
      formData.append("file", file.file);
      formData.append("docid", this.userDocid);
      formData.append("fileid", this.id);
      axios
        .post(this.uploadUrl, formData, {
          "content-type": "multipart/form-data",
          headers: this.headers,
        })
        .then((res) => {
          if (res.data) {
            if (res.data.success === false) {
              this.$notify({
                type: "warning",
                message: res.data.msg,
              });
              file.status = "failed";
              file.message = "上传失败";
              // return false;
            } else {
              this.$notify({ type: "success", message: "上传成功" });
              this.$store.commit("store_modular/ONCLICK_ROUER", this.formData);
              if (file instanceof Array) {
                //判断是否是数组
                file.map((v, i) => {
                  v.status = "success";
                  v.message = "";
                  v.url = res.data[i];
                });
              } else {
                file.status = "success";
                file.message = "";
                file.url = res.data.data;
              }
            }
          }
        })
        .catch((err) => {
          this.$notify({
            type: "warning",
            message: "上传失败",
          });
          file.status = "failed";
          file.message = "上传失败";
        });
    },
    // 删除图片在服务器上删除
    recordApprovaUploadImg(item) {
      console.log(item, "删除当前图片");
      if (item.imageid || item.url) {
        let obj = {};
        obj.imageid = item.imageid ? item.imageid : item.url.imageid;
        console.log(obj.imageid, "obj.imageid");
        deleteImg({
          imageid: obj.imageid,
        }).then((res) => {
          if (res.data.success === false) {
            this.$notify({
              type: "warning",
              message: res.data.msg,
            });
          } else {
            this.$notify({ type: "success", message: "删除成功" });
            this.formData = this.formData.filter(
              (v) => v.imageid != item.imageid
            );
            this.$store.commit("store_modular/ONCLICK_ROUER", this.formData);
          }
        });
      } else {
        this.formData = this.formData.filter((v) => v.message !== item.message);
        this.$store.commit("store_modular/ONCLICK_ROUER", this.formData);
      }
    },
  },
  watch: {
    fileList: {
      handler(val) {
        console.log("数据改变infoData", val);
        if (val) {
          const newData = JSON.parse(JSON.stringify(val));
          this.formData = newData;
        } else {
          this.formData = [];
        }
      },
      deep: true,
      immediate: true,
    },
    fileId: {
      handler(val) {
        if (val) {
          this.id = val;
        }
      },
      deep: true,
      immediate: true,
    },
    docid: {
      handler(val) {
        if (val) {
          this.userDocid = val;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  components: {},
};
</script>

<style lang="less" scoped>
::v-deep .van-uploader__upload {
  border: 1px dashed #bbbbbb;
}
::v-deep .van-icon__image {
  width: 70px;
  height: 50px;
}
</style>
